import 'package:liuxlcommon/util/string_utils.dart';
import 'package:liuxlcommon/view/my_style.dart';
import 'package:liuxlcommon/view/extension_widget.dart';
import 'package:ladder_cash/app/key_mix.dart';
import 'package:ladder_cash/generated/l10n.dart';
import 'package:ladder_cash/value/app_colors.dart';
import 'package:ladder_cash/value/app_const.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:liuxlcommon/view/lxl_widget.dart';
import 'package:liuxlcommon/view/my_box.dart';
import 'package:ladder_cash/app/page/index/index_logic.dart';
import 'package:ladder_cash/value/app_lstyle.dart';

import '../../../config/super_theme.dart';
import '../../../gen/assets.gen.dart';
import '../../../library/src/logger.dart';
import '../../com/view/webview/my_web/my_web_page.dart';
import '../../router_manage.dart';
import '../component/base_page_bg.dart';
import '../component/common.dart';
import '../component/decoration_bg.dart';
import '../component/product_detail.dart';

class SmallCardPage extends StatefulWidget {
  @override
  _LargeCardPageState createState() => _LargeCardPageState();
}

class _LargeCardPageState extends State<SmallCardPage> {
  IndexLogic logic = Get.find<IndexLogic>();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Container(
        color: SuperTheme.secondPrimary,
        child: Column(children: [
          getProductDetail(
              isShowBg: true,
              title: S.current.appName,
              amountRange: '${data?['amountRange'.hx]}',
              loanRate: data['loanRate'.hx],
              termInfo: data['termInfo'.hx],
              termInfoDes: data['termInfoDes'.hx],
              loanRateDes: "${data['loanRateDes'.hx]}"),

          SizedBox(
            height: 56.w,
            child: commonBtn(data['buttonText'.hx],
                isShowRight: true,
                img: Assets.home.home9528Btn.path, callback: () {
                  logic.clickApply(data);
                }),
          ),
          // LText.easy(S.current.moreOptions, 16.sp, fw7)
          //     .padding(left: 18.w, top: 20.w)
          //     .size(double.infinity, null),
          10.lsh,
          Container(
            margin: EdgeInsets.all(12),
            padding: EdgeInsets.all(12),
            decoration: getBorderDecoration(isShowBorder: false),
            child: Column(
              children: [
                Row(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Image.asset(
                          Assets.home.homeMarker.path,
                          width: 30.w,
                          height: 30.w,
                        ),
                        SizedBox(
                          width: 10.w,
                        ),
                        middleFont(S.current.loanSupermarket,
                            fontsize: 20.sp,
                            fontWeight: FontWeight.w900,
                            fontFamily: 'italic'),
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  width: 20.w,
                ),
                moreOptionsBox1
              ],
            ),
          )
        ]),
      ),
    );
  }

  get btnBox => LText.easy(data['buttonText'.hx])
      .style(rzBtnSty)
      .onTapL(() => logic.clickApply(logic.smallCardData));

  get t1css => '''height: 17px;
font-size: 12px; 
font-weight: 500; 
color: #999999;''';

  get t2css => '''
  text-align:center;
  flex:1;font-weight: 500;
font-size: 15px;
color: #FFFFFF;''';

  tagView(title, value) {
    return LRow.eazy([
      LText.easy(title, 12.sp, fw5, 0xFF999999.color),
      LText.easy(value, 12.sp, fw5, 0xFF555555.color),
    ]);
  }

  get data => logic.smallCardData ?? {};
  itemView(item) {
    return Container(
      margin: EdgeInsets.only(top: 20.w),
      height: 185.w,
      decoration:
          BoxDecoration(image: getDecorationBg(Assets.order.order22Bg.path)),
      child: LColumn(
        lStyle: LStyle(padding: EdgeInsets.symmetric(horizontal: 16.w), css: '''
        padding:8px 18px;               
                  width: 323px;
     '''),
        children: [
          LFlexH([
            LImage.easy(item['productLogo'.hx], 28.w, 28.w, 4.w),
            7.lsw,
            middleFont(item['productName'.hx],
                fontFamily: "italic", fontWeight: FontWeight.w900),
            Expanded(child: Text("")),
            LText.easy(item['buttonText'.hx], 13.sp, fw4, Colors.white)
                .style(rzBtnSty
                  ..fontSize = 12.sp
                  ..backgroundColor = Colors.white
                  ..backgroundImage = Assets.order.orderBtnBg.path
                  ..radius = 30.w
                  ..color = Colors.white)
                .size(null, 34.w)
                .paddingH(10.w)
          ])
              .size(null, 50.w)
              .radiusOnly(topRight: 7.w, topLeft: 7.w)
              .paddingH(16.w),
          textBorder(item['amountRange'.hx],
              fontsize: 30.sp,
              fontFamily: 'italic',
              fontWeight: FontWeight.w900),
          Container(
            height: 68.w,
            padding: EdgeInsets.all(12.w),
            decoration: BoxDecoration(
                borderRadius: getTopRadius(isAll: true),
                color: SuperTheme.lightBgPrimary),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                LColumn.eazy([
                  LText.easy(S.current.loanTerm, 12.sp, fw4,
                      AppColors.textSecondColor),
                  LText.easy(item['termInfo'.hx], 14.sp, fw4,
                      AppColors.textSecondColor),
                ]).flex(1),
                LColumn.eazy([
                  LText.easy(S.current.interestRate, 12.sp, fw4,
                      AppColors.textSecondColor),
                  LText.easy(
                      item['loan_rate'.hx], 14.sp, fw4, Color(0xFF015124)),
                ]).flex(1),
              ],
            ),
          ),
        ],
        onTap: () {
          logic.clickApply(item);
        },
      ),
    );
  }



  get moreOptionsBox1 => LColumn.eazy(
      [for (dynamic item in (logic.productList ?? [])) itemView(item)]);

  get moreOptionsBox => <Widget>[
        for (dynamic item in (logic.productList ?? []))
          LColumn.eazy([
            LRow.eazy([
              LText.easy(item['buttonText'.hx], 12.w, FontWeight.bold)
                  .style(rzBtnSty
                    ..fontSize = 12.sp
                    ..width = 76.w
                    ..height = 24.w)
            ]).margin(bottom: 10.w),
            LDivider(),
            LRow.eazy([
              LText.easy(
                      item['amountRangeDes'.hx], 12.sp, fw5, Color(0xFF999999))
                  .flex(1),
            ]).margin(top: 10.w),

          ])
              .padding(left: 16.w, right: 16.w, top: 12.w, bottom: 12.w)
              .radius(18.w)
              .bgColor(Colors.white)
              .margin(top: 15.w)
              .onTapL(() => logic.clickApply(item))
      ].column.paddingH(20.w).size(double.infinity, null);
}
